<template>
    <LoginForm @toggleForm="toggleForm" v-if="mode === 'login'" />
    <RegisterForm @toggleForm="toggleForm" v-else />
</template>

<script lang="ts" setup>
import LoginForm from "@/components/LoginForm.vue";
import RegisterForm from "@/components/RegisterForm.vue";
import { defineComponent, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const mode = ref(route.query.mode || "login");

const toggleForm = () => {
    mode.value = mode.value === "login" ? "register" : mode.value === "register" ? "login" : "register";
    router.replace({ name: "login", query: { mode: mode.value } });
};
</script>

<style scoped lang="scss"></style>
